<template>
  <div class="content">
    <!-- logo -->
    <div class="logo">
      <div class="logo-image">
        <img src="./image/logo.png" />
      </div>
      <div class="logo-text">
        社交app
      </div>
    </div>
    <!-- 底部按钮 -->
    <footer class="button">
      <div class="register" @click="goRegister()">
        <p>注册</p>
      </div>
      <div class="login" @click="goOnline()">
        <p>登录</p>
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  methods: {
    goRegister() {
      this.$router.push({ path: "/Register" });
    },
    goOnline() {
      this.$router.push({ path: "/online" });
    }
  }
};
</script>
<style scoped>
/* 页面主体 */
.content {
  width: 100%;
  background-color: white;
}

/* logo和文字 */
.logo {
  height: 490px;
  widows: 100%;
}

.logo-image {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo-text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 底部按钮 */
.button {
  height: 50px;
  width: 100%;
  display: flex;
  flex-flow: row;
  position: fixed;
  bottom: 0;
  cursor: pointer;
}

.register {
  width: 100%;
  color: white;
  text-align: center;
  background-color: #01a0f3;
}

.login {
  width: 100%;
  color: white;
  text-align: center;
  background-color: #070608;
}
</style>
